<!-- 人才基金-加入协会个人填写申请资料 -->
<template>
    <div class="box">
        <!-- <div class="d-flex d-flex-between d-flex-items-center header">
            <img src="@/assets/image/logo-3.png" class="w-15p">
            <div>
                <el-button size="small">注册</el-button>
                <el-button type="danger" size="small">登录</el-button>
            </div>
        </div> -->
        <el-header />
        <div class="center">
            <div class="center-content c-p">
                <h3>{{ info.title }}</h3>
                <p class="time">{{ info.createtime }}</p>
                <div class="content" v-html="info.content"></div>
                <el-button class="back_btn" type="primary" size="big" @click="toIndex()">返回主页</el-button>
            </div>
        </div>
        <el-footer />
    </div>
</template>

<script>
import elFooter from '@/components/elFooter.vue';
import ElHeader from '@/components/elHeader.vue';

export default {
    data() {
        return {
            article_id: '',
            question_id: '',
            info: [],
            qtype: ''
        }
    },
    created() {
    },
    mounted() {
        this.article_id = this.$route.query.article_id
        this.question_id = this.$route.query.question_id
        this.policy_id = this.$route.query.policy_id

        if (this.article_id) {
            this.rcjjArticleIInfo()
        }
        if (this.question_id) {
            this.rcjjQuestionInfo()
        }
        if (this.policy_id) {
            this.rcjjPolicyInfo()
        }
    },
    methods: {
        // 获取政策信息详情
        async rcjjPolicyInfo() {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_policy_info",
                data: {
                    policy_id: this.policy_id
                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.info = res.info
            } else {
                this.$message.error(res.msg);
            }
        },
        // 获取资讯信息详情
        async rcjjArticleIInfo() {
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_article_info",
                data: {
                    article_id: this.article_id
                }
            });
            if (res.code == 1) {
                this.info = res.info
            } else {
                this.$message.error(res.msg);
            }
        },
        // 获取问题详情
        async rcjjQuestionInfo() {
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_question_info",
                data: {
                    question_id: this.question_id
                }
            });
            if (res.code == 1) {
                this.info = res.info
            } else {
                this.$message.error(res.msg);
            }
        },
        toIndex() {
            this.$router.push('/index')
        },
    },
    components: {
        elFooter,
        ElHeader
    }
}
</script>

<style>
body {
    background: #f6f6f6;
}
</style>
<style scoped>
h3,
.time {
    text-align: center;
}

.time {
    margin: 20px 0;
}

.box {
    height: 100vh;
    overflow-y: auto;
}

.header {
    height: 10%;
    padding: 0 8%;
    width: 84%;
    background: #fff;
}

.center {
    width: 75%;
    margin: 40px auto;
}

.banner {
    width: 100%;
    height: 100%;
}

.bottom {
    width: 76%;
    height: 20%;
    background: #1F252D;
    color: #fff;
    padding: 0 12%;
}

.bottom-desc {
    height: 40%;
    width: 100%;

}

.login-box {
    position: absolute;
    background: #fff;
    z-index: 9;
    right: 20%;
    top: 13%;
    width: 21%;
    padding: 2%;
    border-radius: 20px;
}

.c-0D5FCD {
    color: #0D5FCD;
}

.nav {
    padding: 0 12.5%;
    background: #AC141B;
    height: 5%;
}

.nav-active {
    background: #8B1117;
}

.center-content {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    padding-bottom: 200px;
}

.center-left-title {
    background: #AC141B;
    width: 100%;
    margin: 0 0 5% 0;
    text-align: center;
    color: #fff;
    line-height: 60px;
}

.b-r {
    border-right: 1px solid #DAD8D8;
}

.b-b {
    border-bottom: 1px solid #DAD8D8;
}

.left-box {
    padding: 0 2%;
}

.right-box {
    padding: 0 2%;
}

.left-active {
    background: #F7E5E6 !important;
    border-left: 5px solid #AC141B !important;
    color: #AC141B !important;
    font-weight: bold;
}

.bgc-AC141B {
    background: #AC141B;
}

.sq-btn {
    background: #F7E5E6;
    border-radius: 4px;
    border: 1px solid #AC141B;
    color: #AC141B;
}

.c-AC141B {
    color: #AC141B;
}

.contact {
    background: linear-gradient(180deg, #FFF7F8 0%, #FFFFFF 100%);
    padding: 2%;
}

.left-shu {
    width: 4px;
    height: 14px;
    background: #AC141B;
    margin-right: 10px;
}

.avatar-uploader {
    display: flex;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
    border: 1px dashed #CAC6C5;
}

.avatar {
    width: 148px;
    height: 148px;
    display: block;
}

.back_btn {

    text-align: center;
    width: 148px;
    height: 38px;
    margin-left: 45%;
    margin-top: 12%;
}

/* 媒体查询，针对手机设备 */
@media (max-width: 768px) {
    .center {
        width: auto;
        margin: 20px auto;
    }

    .center-content {
        padding: 15px;
        padding-bottom: 100px;
    }

    .back_btn {
        margin-left: 30%;
    }

    .content {
        width: 100%;
    }

    ::v-deep .content .content {
        width: 100% !important;
    }

    ::v-deep .job-tit {
        line-height: 40px !important;
    }
}
</style>